<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>基础知识</title>
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"" rel="stylesheet">
	<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/3.2.3/animate.css" rel="stylesheet">
	<link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
	<link rel="stylesheet" type="text/css" href="../static/css/public.css" />
</head>
<body>
	<!--右边内容-->
	<div id="app" class="main">
		<div class="shadow">
			<div>
				<h4>表单元素</h4>
				<div>
					<pre>
	单选框,label将字体与按钮一起绑定，后面需加上id
	&lt;label &gt; 男:&lt;input type="radio" name="sex" value="1" &gt;&lt;/label &gt;
	&lt;label&gt;女:&lt;input type="radio" name="sex" value="2"&gt;&lt;/label&gt;
	<label>男:<input type="radio" name="sex" value="1"></label>	<label>女:<input type="radio" name="sex" value="2"></label>
	或
	&lt;label for="sex"&gt;男:&lt;/label&gt;&lt;input type="radio" name="sex" id="sex"&gt;	
	&lt;label for="sex"&gt;女:&lt;/label&gt;&lt;input type="radio" name="sex" id="sex" &gt;
	
	兴趣（复选框）
	&lt;label&gt;跑步&lt;input type="checkbox" name="hobby[]"&gt;&lt;/label&gt;&lt;
	&lt;label for="sing"&gt;唱歌&lt;/label&gt; &lt;input type="checkbox" id="sing"name="hobby[]"&gt;&lt;
	&lt;label&gt;跳舞 &lt;input type="checkbox" name="hobby[]"&gt;&lt;/label&gt;&lt;
	<label>跑步<input type="checkbox" name="hobby[]"></label><label for="sing">唱歌</label> <input type="checkbox" id="sing"name="hobby[]"><label>跳舞 <input type="checkbox" name="hobby[]"></label>
	复选框提交给后台，其name属性值，需要带上“[]”
	
	如果要使用&lt；input type=“files”，就需要在form标签上
	加上enctype="multipart/form-data"	 这样后台就可以收到数据
		
					</pre>
				</div>
				<div>
					<h4>多选</h4>
					<pre>
	&lt;select name=" gameArea" size="2" multiple="multiple"&gt;
	&lt;!--
	1、size的意思是表示显示的个数
	2、如果多选就要加上（例如地址是中国广东广州市）
	multiple="multiple"
	--&gt;
	&lt;optgroup label="微信区"&gt;
	&lt;option value="1"&gt;一区&lt;/option&gt;
	&lt;option value="2"&gt;二区&lt;/option&gt;
	&lt;option value="3"&gt;三区&lt;/option&gt;
	&lt;option value="4"&gt;四区&lt;/option&gt;
	&lt;option value="5"&gt;五区&lt;/option&gt;
	&lt;option value="6"&gt;六区&lt;/option&gt;
	&lt;/optgroup&gt;
	&lt;optgroup label="QQ区"&gt;
	&lt;option value="1"&gt;一区&lt;/option&gt;
	&lt;option value="2"&gt;二区&lt;/option&gt;
	&lt;option value="3"&gt;三区&lt;/option&gt;
	&lt;option value="4"&gt;四区&lt;/option&gt;
	&lt;option value="5"&gt;五区&lt;/option&gt;
	&lt;option value="6"&gt;六区&lt;/option&gt;
	&lt;/optgroup&gt;
	&lt;/select&gt;
	<select >
	<optgroup label="微信区">
	<option value="1">一区</option>
	<option value="2">二区</option>
	<option value="3">三区</option>
	<option value="4">四区</option>
	<option value="5">五区</option>
	<option value="6">六区</option>
	</optgroup>
	<optgroup label="QQ区">
	<option value="1">一区</option>
	<option value="2">二区</option>
	<option value="3">三区</option>
	<option value="4">四区</option>
	<option value="5">五区</option>
	<option value="6">六区</option>
	</optgroup>
	</select>
	
	&lt;textarea name="wenben" rows="12" cols="33" style="resize: none;" readonly="readonly"&gt;&lt;/textarea&gt;
	&lt;!--
	rows\cols表示文本框的大小设置（每行的字个数和行数）
	style="resize: none;"表示文本固定，不可以拉大，否则会改变网页排版
	readonly="readonly"  表示只读，不可以给用户修改
	disabled   表示此用户被禁，不能提交给后台
	--&gt;
					</pre>
				</div>
				<div>
					<h4>输入框</h4>
					<p>
						 required="required"为输入框添加必填属性
					</p>
					<pre>
	&lt;input type="text" name="usernanme" required placeholder="请输入用户名"&gt;&lt;/td&gt;
		&lt;!-- placeholder="请输入用户名"  这个会出现在用户框内，但在点击后就会消失 --&gt;
	文字颜色修改 修改框内注释文字的颜色
	 /*兼容谷歌*/	  
	input::-webkit-input-placeholder{
		color: red;
	}	
	/*兼容IE*/	
	input:-ms-input-placeholder{
		color: red;
	}
	<form  method="post">
		<input type="text" name="usernanme" 
		 required="required" placeholder="请输入用户名">
		<button type="submit">submit</button>
	</form>
	<style type="text/css">
		input::-webkit-input-placeholder{
			color: red;
		}	
		input:-ms-input-placeholder{
			color: red;
		}
	</style>
					</pre>
				</div>
			</div>
		</div>
	</div>
	<!--页面加载进度条-->
	<script src="https://cdn.bootcdn.net/ajax/libs/pace/0.5.0/pace.min.js"></script>
</body>

</html>